<style lang="scss" scoped>

#tabs{
    width:1200px;
    margin:20px auto;
    display: flex;
    border-bottom: 1px solid #eee;
    p{
        position: relative;
        cursor: pointer;
        width:60px;
        text-align: center;
        height: 50px;
        line-height: 50px;
        margin:0 30px 0 0;
    }
    p.active::before{
        left: 0;
        position:absolute;
        bottom: 0;
        content: "";
        height: 4px;
        width:100%;
        background:#4485F0;
    }
}
.trademark .box{
    width:1200px;
    margin:20px auto;

}
</style>
<template>
    <div class="trademark">
        <trademark-top />
        
            <div id="tabs">
                <p :class="{active:tabs}" @click="tabs=1">商标分类</p>
                <p :class="{active:!tabs}" @click="tabs=0">行业匹配</p>
            </div>
            <keep-alive>
                <component class="box"  :is="tabs?Classify:Fit"></component>
            </keep-alive>
        <Footer/>
    </div>
</template>
<script>
import ("@/assets/init.scss")
import trademarkTop      from "@/components/trademark_top"
import Classify      from "@/components/classify"
import Footer      from "@/components/footer"
import Fit      from "@/components/fit"
export default {
    data(){
        return {
            Fit,
            Footer,
            Classify,
            tabs:1,
        }
    },
    components:{
        Footer,
        trademarkTop
    },
    watch:{
        tabs(){
            sessionStorage.setItem('tabs',this.tabs)
        }
    },
    created(){
        this.tabs=sessionStorage.getItem('tabs')==0 ?0:1
    }
}
</script>